<template>
  <view
    class="chat-contact-item"
    :class="rootClassMap"
    @click="onClick"
  >
    <view class="chat-contact-item__head">
      <image
        class="chat-contact-item__head-image"
        :src="head"
      ></image>
      <view
        v-if="tag && !mini"
        class="chat-contact-item__head-tag"
        v-text="tag"
      ></view>
    </view>
    <view class="chat-contact-item__content">
      <view
        class="chat-contact-item__content-nick"
        v-text="nick"
      ></view>
      <view
        v-if="!mini"
        class="chat-contact-item__content-sub-text"
        v-text="text"
      ></view>
    </view>
    <view
      v-if="!mini"
      class="chat-contact-item__time"
      v-text="time"
    ></view>
  </view>
</template>

<script>
  export default {
    props: {
      mini: { type: Boolean },
      head: { type: String },
      tag: { type: [String, Number] },
      nick: { type: String },
      text: { type: String },
      time: { type: String }
    },
    computed: {
      rootClassMap () {
        return {
          'is-mini': this.mini
        }
      }
    },
    methods: {
      onClick (e) {
        this.$emit('click', e)
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "./common";
  .chat-contact-item {
    @extend .flex;
    position: relative;
    height: 68px;
    padding: 0 45px 0 15px;
    &:after {
      content: '';
      display: block;
      position: absolute;
      height: 1px;
      bottom: 0;
      right: 0;
      left: 78px;
      border-bottom: 1px solid $br-color;
    }
    &:active {
      background-color: $c-active;
    }
    &::v-deep {
      * {
        pointer-events: none;
      }
    }
    .chat-contact-item__head {
      @extend .flex-shrink;
      position: relative;
      margin-right: 15px;
      .chat-contact-item__head-image {
        width: 46px;
        height: 46px;
        border-radius: $br-radius;
      }
      .chat-contact-item__head-tag {
        @extend .flex;
        position: absolute;
        right: -3px;
        top: -3px;
        width: 17px;
        height: 17px;
        color: $c-white;
        font-size: $fz-small;
        background-color: $c-red;
        border-radius: $br-circle;
      }
    }
    .chat-contact-item__content {
      @extend .flex-grow;
      .chat-contact-item__content-nick {
        @extend .text-1;
        font-size: $fz-mid;
        height: $fz-mid;
        font-weight: bold;
        line-height: 1;
      }
      .chat-contact-item__content-sub-text {
        @extend .text-1;
        margin-top: 8px;
        font-size: $fz-small;
        line-height: 1;
        color: $c-mark;
      }
    }
    .chat-contact-item__time {
      position: absolute;
      right: 15px;
      top: 11px;
      width: 30px;
      font-size: $fz-default;
      color: $c-mark;
    }

    &.is-mini {
      height: 50px;
      padding-right: 15px;
      &:after {
        left: 68px;
      }
      .chat-contact-item__head {
        width: 38px;
        height: 38px;
        .chat-contact-item__head-image {
          width: 38px;
          height: 38px;
        }
      }
    }
  }
</style>
